<!-- 自定义右键 -->
<template>
  <div v-show="show" ref="menuRef" class="menu" :style="{ left: menuLeft + 'px', top: menuTop + 'px' }">
    <div
      v-for="(item, index) in dataList"
      :key="index"
      class="menu-item"
      @mouseover="overSubmenu(item, index)"
      @click.stop="item.callback"
    >
      <div>
        <img v-if="item.icon_type === 'url'" class="image-icon" :src="item.icon" />
        <img v-else-if="item.icon_type === 'img'" class="image-icon" :src="getAssetsImage(item.icon)" />
        <img v-else-if="item.icon_type === 'svg'" class="image-icon" :src="getAssetsImage(item.icon)" />
        <span>{{ item.name }}</span>
      </div>
      <div v-if="item.children" class="right-triangle">
        <el-icon><CaretRight /></el-icon>
      </div>
      <div v-if="showChildren && currentIndex === index" class="submenu">
        <div v-for="(child, index2) in item.children" :key="index2" class="menu-item" @click.stop="child.callback">
          <div>
            <img v-if="child.icon_type === 'url'" class="image-icon" :src="item.icon" />
            <img v-else-if="child.icon_type === 'img'" class="image-icon" :src="getAssetsImage(item.icon)" />
            <img v-else-if="child.icon_type === 'svg'" class="image-icon" :src="getAssetsImage(item.icon)" />
            <span>{{ child.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getAssetsImage } from '@/utils/util';

type dataListType = {
  icon: string;
  icon_type: string;
  name: string;
  callback: (arg1: string) => void;
  children?: dataListType[];
};

defineProps<{
  show: boolean;
  dataList: dataListType[];
  menuLeft: number;
  menuTop: number;
}>();

const showChildren = ref<boolean>(false);
const currentIndex = ref<number>(0);
const menuRef = ref<HTMLElement | null>(null);

const overSubmenu = (item: any, index: number) => {
  currentIndex.value = index;
  if (item.children) {
    showChildren.value = true;
  } else {
    showChildren.value = false;
  }
};

defineExpose({ menuRef });
</script>
<style lang="scss" scoped>
.menu {
  border-radius: 4px;
  width: 150px;
  background-image: url('@/assets/images/line-bg.png');
  background-repeat: no-repeat;
  background-size: 150px 100%;
  position: fixed;
  z-index: 9999;
  .menu-item {
    position: relative;
    height: 40px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    border-bottom: 1px solid rgba(79, 133, 168, 1);
    &:hover {
      cursor: pointer;
      background-color: rgba(6, 53, 122, 0.8);
    }
    &:last-child {
      border-bottom: none;
    }
    .image-icon {
      width: 15px;
      height: 15px;
      margin-left: 10px;
      margin-right: 20px;
    }
    .right-triangle {
      margin-right: 10px;
    }

    // 子菜单
    .submenu {
      right: -155px;
      top: 0;
      position: absolute;
      width: 150px;
      background-image: url('@/assets/images/line-bg.png');
      background-repeat: no-repeat;
      background-size: 150px 100%;
      .image-icon {
        width: 15px;
        height: 15px;
        margin-left: 10px;
        margin-right: 20px;
      }
    }
  }
}
</style>
